<template>
  <div class="outer">
    <div class="todo-container">
      <!-- 头部 -->
      <TodoHeader />
      <!-- 内容展示区域 -->
      <TodoMain :todoList="todoList" />
      <!-- 底部区域 -->
      <TodoFooter
        :isCheckedNum="isCheckedNum"
        :todoListLength="todoListLength"
      />
    </div>
  </div>
</template>

<script>
import TodoHeader from "./components/todoHeader";
import TodoMain from "@/components/TodoMain";
import TodoFooter from "@/components/TodoFooter";
export default {
  name: "App",
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
  data() {
    return {
      todoList: null,
    };
  },
  methods: {
    //添加列表
    addList(e) {
      const msg = e.target.value.trim();
      if (msg.length === 0) {
        alert("请输入内容!");
        return;
      }
      const info = this.todoList.find((item) => item.title === msg);
      if (info) {
        alert("请不要输入重复内容！");
        return;
      }
      this.todoList.unshift({
        id: Math.random().toString(8).slice(2),
        title: msg,
        isChecked: false,
      });
      e.target.value = null;
    },
    //根据id改变checked状态
    changeChecked(id) {
      const idx = this.todoList.findIndex((item) => item.id === id);
      this.todoList[idx].isChecked = !this.todoList[idx].isChecked;
    },
    //根据id删除当前列表
    removeListById(id) {
      /* 此方法使用数组方法 */
      // const idx = this.todoList.findIndex((item) => item.id === id);
      // this.todoList.splice(idx, 1);
      /* 以下方法使用命令式编程 */
      let newNum;
      for (let i = 0; i < this.todoList.length; i++){
        if (this.todoList[i].id === id){
          newNum = i;
          break
        }
      }
      this.todoList.splice(newNum, 1);
    },
    //全选改变
    changeAll(flag) {
      /* 此方法使用数组方法 */
      // this.todoList = this.todoList.map((item) => {
      //   item.isChecked = flag;
      //   return item;
      // });
      /* 以下方法使用命令式编程 */
      for (let i = 0; i < this.todoList.length; i++){
        this.todoList[i].isChecked = flag
      }
    },
    //删除全部选中
    removeAll() {
      /* 此方法使用数组方法 */
      // this.todoList = this.todoList.filter((item) => item.isChecked === false);
      /* 以下方法使用命令式编程 */
      let newTodoList = [];
      for (let i = 0; i < this.todoList.length; i++) {
        if (this.todoList[i].isChecked === false) {
          newTodoList.push(this.todoList[i]);
        }
      }
      this.todoList = newTodoList;
    },
  },
  beforeMount() {
    this.todoList = localStorage.todoList
      ? JSON.parse(localStorage.todoList)
      : [];
  },
  mounted() {
    this.$bus.$on("addList", this.addList);
    this.$bus.$on("changeChecked", this.changeChecked);
    this.$bus.$on("removeListById", this.removeListById);
    this.$bus.$on("changeAll", this.changeAll);
    this.$bus.$on("removeAll", this.removeAll);
  },
  computed: {
    //选中状态的数量
    isCheckedNum() {
      return this.todoList.filter((item) => item.isChecked === true).length;
    },
    //全部数量
    todoListLength() {
      return this.todoList.length;
    },
  },
  //本地存储
  watch: {
    todoList: {
      deep: true,
      handler() {
        localStorage.setItem("todoList", JSON.stringify(this.todoList));
      },
    },
  },
};
</script>

<style>
@import url(@/App.css);
</style>